<template>
  <div>
    <el-button type="primary" plain @click="backIndex">返回首页</el-button>
    <div style="margin-top: 20px">
      <template>
        <el-select v-model="categoryId" placeholder="请选择所属系统">
          <el-option
            v-for="item in options"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </template>
      <el-input style="width:35%;" v-model="searchdata" @keyup.enter.native="queryList"
                placeholder="请输入关键字">
        <template slot="append">
          <el-button type="primary" plain @click="queryList">查找</el-button>
        </template>
      </el-input>
    </div>
    <el-row type="flex" justify="center" align="middle" style="margin-top: 30px">
      <div class="infinite-list-wrapper" style="overflow:auto">
        <el-row style="margin-top: 30px">
          <el-col :span="3" v-for="filepo in this.filemessagePo" :key="filepo.id" :offset="1"
                  style="margin-bottom: 20px;margin-right: 15px;margin-left: 15px;min-width: 230px">
            <el-card :body-style="{ padding: '10px' }" shadow="always">
              <img :src=filepo.fileimage class="image">
              <div style="padding: 14px;">
                <span :title="filepo.filename">{{ filepo.filename  | ellipsis }}</span>
                <el-divider/>
                <span :title="filepo.filetitle">{{ filepo.filetitle  | ellipsis }}</span>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="showInfo(filepo)">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <el-dialog
      :title=this.filepo.filename
      :visible.sync="centerDialogVisible"
      width="50%"
      center>
      <img :src=this.filepo.fileimage class="image">
      <el-divider></el-divider>
      <div>{{ this.filepo.filetitle }}</div>
      <el-divider></el-divider>
      <el-link type="primary" :href="this.filepo.fileurl" target="_blank">下载地址</el-link>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import service from '@/utils/http';

export default {
  name: "viedoPage",

  data() {
    return {
      restaurants: [],
      count: 10,
      loading: false,
      filemessagePo: [],
      categoryId: '0',
      options: [],
      centerDialogVisible: false,
      filepo: {},
      searchdata: '请先输入关键字,需查询所有请将当前文本删除^_^',
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return '';
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    }
  },
  computed: {},
  mounted() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      service.post('category/queryAll', {}).then(res => {
        this.options = res;
      })
    },
    showInfo(filepo) {
      this.filepo = filepo
      this.centerDialogVisible = true
    },
    queryList() {
      service.post('filesmessage/queryAll', {by1: this.categoryId, filetitle: this.searchdata}).then(res => {
        this.filemessagePo = res
        this.isshow = true
      })
    },
    backIndex() {
      this.$router.push({path: '/'});
    },
    gotoDetial(postpoo) {
      this.$router.push({
        name: 'detialpage',
        params: {
          post: postpoo
        }
      });
    },
  }
}
</script>

<style scoped>

.time {
  float: left;
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 100px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
